<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PointLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addText1",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(3, [110, 36])

            fetch(`${window.location.origin}/antv-test/data/oVTMqfzuuRFKiDwhPSFL.json`)
                .then(res => res.json())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data.list, {
                            parser: {
                                type: 'json',
                                x: 'j',
                                y: 'w'
                            }
                        })
                        .shape('m', 'text')
                        .size(12)
                        // .rotate("j",()=>{
                        //   return  Math.random()*3*(Math.random()>0.5?1:-1)
                        // })
                        .color('w', ['#0e0030', '#0e0030', '#0e0030'])
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
                            spacing: 2, // 字符间距
                            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                            stroke: '#ffffff', // 描边颜色
                            strokeWidth: 0.3, // 描边宽度
                            strokeOpacity: 1.0
                        });

                    scene.addLayer(pointLayer);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
